<script setup>
import {getUserInfoService, userLoginService, userRegisterService} from "@/api/user.js";
import { ref } from 'vue'
import { User, Lock, Phone } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
import {useTokenStore} from '@/stores/token.js'

let tokenStore = useTokenStore();
//获取路由
const router = useRouter()

// 整个的用于提交的form数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: '',
  phone: ''
})

//自定义校验函数
function validatePass(rule, value, callback){
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== formModel.value.password) {
    callback(new Error("请确保两次输入密码一致!"))
  } else {
    callback()
  }
}
//自定义校验电话号码
function validatePhone(rule, value, callback) {
  // 这里是一个简单的正则表达式，用于匹配中国大陆的手机号码（11位数字，以1开头）
  // 注意：这只是一个简单的示例，实际中可能需要更复杂的验证
  const regex = /^1[3-9]\d{9}$/;
  if (value === '') {
    callback(new Error('请输入电话号码'));
  } else if (!regex.test(value)) {
    callback(new Error('请输入有效的11位手机号码'));
  } else {
    callback();
  }
}

//表单校验规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 16, message: '请输入5~16位非空字符', trigger: 'blur' }
  ],
  password:[
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 16, message: '请输入5~16位非空字符', trigger: 'blur' }
  ],
  repassword:[
    { validator: validatePass, trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ]
}

//注册函数
async function register(){
  let result = await userRegisterService(formModel.value);
  ElMessage.success(result.message ? result.message : "注册成功")
  router.push("/login")
}

//登录函数
async function login(){
  let result = await userLoginService(formModel.value)
  ElMessage.success(result.message ? result.message : "登录成功")
  //把得到的token存在pinia中
  tokenStore.setToken(result.data)
  //跳转路由
  let res = await getUserInfoService()
  if(res.data.flag === 0){
    router.push("/GuidePage")
  }else if(res.data.flag === 1){
    if(res.data.status !== 2)
      router.push("/HomePage")
    else
      router.push("/behind/content1")
  }

}

function resetPassword(){
  //跳转到找回密码页面
  router.push("/resetPassword")
}

</script>

<template>

  <header class="header-section">
    <div class="container">
      <div class="row align-items-center">
        <!-- 假设你有一个网站Logo图片，这里用一个div代替实际图片路径 -->
        <div class="col-auto logo">
          <img src="@/assets/images/logo.png" alt="Your Website Logo" class="logo-img">
        </div>
        <div class="col title">
          <h1 class="heading">聚职智能求职分析平台</h1>
        </div>
      </div>
    </div>
  </header>

  <div class="popup-bg">

  </div>

  <div class="popup-login-signup">
    <div class="container">
      <div class="row">
        <!-- Modal -->
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <nav class="tab-bar-top">
                <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                  <a class="nav-item nav-link active" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-login" aria-selected="true">登录</a>
                  <a class="nav-item nav-link" id="nav-signup-tab" data-toggle="tab" href="#nav-signup" role="tab" aria-controls="nav-signup" aria-selected="false">注册</a>
                </div>
              </nav>
              <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-login" role="tabpanel" aria-labelledby="nav-login-tab">
                  <el-form :model="formModel" :rules="rules"  ref="form" class="form-login-signup">

                    <el-form-item prop="username" class="form-item-custom">
                      <label for="inputEmail">用户名</label>
                      <el-input  id="inputEmail" v-model="formModel.username"
                                 :prefix-icon="User"
                                 placeholder="请输入用户名"
                                 size="large"
                                 autocomplete="off"
                                 class="uniform-input"
                      >
                      </el-input>

                    </el-form-item>

                    <el-form-item prop="password" class="form-item-custom">
                      <label for="inputPassword">密码</label>
                      <el-input type="password"
                                v-model="formModel.password"
                                id="inputPassword"
                                size="large"
                                :prefix-icon="Lock"
                                placeholder="请输入密码" required
                                class="uniform-input"
                      >
                      </el-input>

                    </el-form-item>

                    <el-button @click="login" class="btn btn-lg btn-primary btn-block btn-color-hover text-uppercase uniform-button login-button">登录</el-button>
                  </el-form>
                  <!-- 添加找回密码按钮 -->
                  <div class="forgot-password">
                    <el-button type="text" @click="resetPassword">忘记密码？</el-button>
                  </div>
                </div>

                <div class="tab-pane fade" id="nav-signup" role="tabpanel" aria-labelledby="nav-signup-tab">
                  <el-form :model="formModel" :rules="rules" class="form-login-signup">
                    <el-form-item prop="username" class="form-label-group">
                      <label for="inputUserame">用户名</label>
                      <el-input v-model="formModel.username"
                                :prefix-icon="User"
                                placeholder="请输入用户名"
                                size="large"
                                autocomplete="off"
                                class="uniform-input"
                      >
                      </el-input>
                    </el-form-item>

                    <el-form-item prop="phone" class="form-label-group">
                      <label for="inputEmail-1">手机号</label>
                      <el-input v-model="formModel.phone"
                                :prefix-icon="Phone"
                                placeholder="请输入电话号码"
                                size="large"
                                autocomplete="off"
                                class="uniform-input"
                      >
                      </el-input>
                    </el-form-item>


                    <el-form-item prop="password" class="form-label-group">
                      <label for="inputPassword-1">密码</label>
                      <el-input v-model="formModel.password"
                                type="password"
                                :prefix-icon="Lock"
                                placeholder="请输入密码"
                                size="large"
                                autocomplete="off"
                                class="uniform-input"
                      >
                      </el-input>
                    </el-form-item>

                    <el-form-item prop="repassword" class="form-label-group">
                      <label for="inputConfirmPassword">确认密码</label>
                      <el-input v-model="formModel.repassword"
                                type="password"
                                :prefix-icon="Lock"
                                placeholder="请再次输入密码"
                                size="large"
                                autocomplete="off"
                                class="uniform-input"
                      >
                      </el-input>
                    </el-form-item>

                    <el-form-item class="custom-control custom-checkbox mb-3">
                      <input type="checkbox" class="custom-control-input" id="customCheck2">
                      <label class="custom-control-label" for="customCheck2">我同意条款和条件</label>
                    </el-form-item>

                    <button @click="register" class="btn btn-lg btn-primary btn-block btn-color-hover text-uppercase uniform-button" type="submit">注册</button>
<!--                    <hr class="my-4">-->
<!--                    <button class="btn btn-lg btn-google btn-block soi-hv text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign up with Google</button>-->
<!--                    <button class="btn btn-lg btn-facebook btn-block soi-hv text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign up with Facebook</button>-->
                  </el-form>
                </div>
              </div>
            </div>
          </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
@import '@/assets/css/reset.css';
@import '@/assets/css/style.css';
@import '@/assets/css/responsive.css';
@import '@/assets/css/bootstrap.min.css';
@import '@fortawesome/fontawesome-free/css/all.min.css';
@import '@/assets/css/login-reset.css';

</style>
